<!DOCTYPE html>
<!-- saved from url=(0024)https://v2.cn.vuejs.org/ -->
<html lang="zh-CN" class="with-v3-banner"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Vue.js</title>
    
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="alternate" hreflang="x-default" href="https://v2.vuejs.org/index.html">
    <link rel="alternate" hreflang="zh" href="https://v2.cn.vuejs.org/index.html">
    <link rel="alternate" hreflang="ja" href="https://jp.vuejs.org/index.html">
    <link rel="alternate" hreflang="ru" href="https://ru.vuejs.org/index.html">
    <link rel="alternate" hreflang="ko" href="https://kr.vuejs.org/index.html">
    <link rel="alternate" hreflang="pt-BR" href="https://br.vuejs.org/index.html">
    <link rel="alternate" hreflang="fr" href="https://fr.vuejs.org/index.html">
    <link rel="alternate" hreflang="es" href="https://es.vuejs.org/index.html">

    <meta property="og:type" content="article">
    <meta property="og:title" content="Vue.js">
    <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta property="og:image" content="https://v2.cn.vuejs.org/images/logo.png">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Vue.js">
    <meta name="twitter:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="twitter:image" content="https://v2.cn.vuejs.org/images/logo.png">

    <link rel="apple-touch-icon" sizes="57x57" href="https://v2.cn.vuejs.org/images/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="https://v2.cn.vuejs.org/images/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="https://v2.cn.vuejs.org/images/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="https://v2.cn.vuejs.org/images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="https://v2.cn.vuejs.org/images/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="https://v2.cn.vuejs.org/images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="https://v2.cn.vuejs.org/images/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="https://v2.cn.vuejs.org/images/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://v2.cn.vuejs.org/images/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="https://v2.cn.vuejs.org/images/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="https://v2.cn.vuejs.org/images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="https://v2.cn.vuejs.org/images/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://v2.cn.vuejs.org/images/icons/favicon-16x16.png">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <link rel="icon" href="./Vue.js_files/logo.svg">

    <meta name="msapplication-TileColor" content="#4fc08d">
    <meta name="theme-color" content="#4fc08d">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="https://v2.cn.vuejs.org/manifest.json">

    <!-- <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin> -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com" rel="preconnect" crossorigin> -->

    <!-- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono&display=swap" rel="stylesheet"> -->
    <!-- <link href="https://fonts.googleapis.com/css?family=Dosis:500&text=Vue.js&display=swap" rel="stylesheet"> -->

    <link href="./Vue.js_files/font-awesome.min.css" rel="stylesheet">

    <!-- main page styles -->
    
<link rel="stylesheet" href="./Vue.js_files/index.css">


    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="./Vue.js_files/vue.js.下载"></script>

    

    <script>
      Vue.config.productionTip = false
      window.PAGE_TYPE = ""
    </script>

    <!-- Fathom - beautiful, simple website analytics -->
    <script src="./Vue.js_files/script.js.下载" data-site="KTDIHEIJ" defer=""></script>
    <!-- / Fathom -->

    <!-- vimeo analytics -->
    <!-- <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script> -->
<meta name="generator" content="Hexo 6.2.0"><link rel="alternate" href="https://v2.cn.vuejs.org/atom.xml" title="Vue.js" type="application/atom+xml">
<style type="text/css">@font-face { font-family: TencentSans; src: url("chrome-extension://lkjkfecdnfjopaeaibboihfkmhdjmanm/static/fonts/TencentSans.woff2"); }</style></head>
  <body class="">

    

    <div id="mobile-bar" class="top">
      <a class="menu-button"></a>
      <a class="logo" href="https://v2.cn.vuejs.org/"></a>
    </div>
    <div>
  <div id="v3-banner">
    <span class="hidden-sm">Vue 2 已经终止支持且不再维护。</span>
    <a target="_blank" rel="noopener" href="https://cn.vuejs.org/">请升级到 Vue 3</a>
    <span class="hidden-sm">或了解有关</span>
    <span class="only-sm"> | </span>
    <a href="https://v2.cn.vuejs.org/eol/">Vue 2 终止支持 (EOL)</a><span class="hidden-sm"> 的信息。</span>
  </div>

  <header id="header">
    <a id="logo" href="https://v2.cn.vuejs.org/">
      <img src="./Vue.js_files/logo.svg" alt="vue logo">
      <span>Vue.js</span>
    </a>
    <ul id="nav">
      <li>
  <form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input aa-input" aria-label="搜索" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style=""><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Arial; font-size: 13.3333px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
  </form>
</li>
<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>文档</h4></li>
    <li>
      <ul>
        <li><a href="https://v2.cn.vuejs.org/v2/guide/" class="nav-link">教程</a></li>
        <li><a href="https://v2.cn.vuejs.org/v2/api/" class="nav-link">API</a></li>
        <li><a href="https://v2.cn.vuejs.org/v2/style-guide/" class="nav-link">风格指南</a></li>
        <li><a href="https://v2.cn.vuejs.org/v2/examples/" class="nav-link">示例</a></li>
        <li><a href="https://v2.cn.vuejs.org/v2/cookbook/" class="nav-link">Cookbook</a></li>
      </ul>
    </li>
    <li><h4>视频教程</h4></li>
    <li>
      <ul>
        <li>
          <a href="https://www.vuemastery.com/courses/" class="nav-link" target="_blank" rel="sponsored noopener">
            Vue Mastery (英文)
          </a>
        </li>
        <li>
          <a href="https://vueschool.io/?friend=vuejs&amp;utm_source=Vuejs.org&amp;utm_medium=Link&amp;utm_content=Navbar%20Dropdown" class="nav-link" target="_blank" rel="sponsored noopener">
            Vue School (英文)
          </a>
        </li>
        <!-- start: special logic for cn -->
        <li>
          <a href="https://learning.dcloud.io/" class="nav-link" target="_blank" rel="sponsored noopener">
            DCloud 视频教程
          </a>
        </li>
        <!-- end: special logic for cn -->
      </ul>
    </li>
  </ul>
</li>

<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank" rel="noopener">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank" rel="noopener">聊天室</a></li>
      <li><a href="https://events.vuejs.org/meetups/" class="nav-link" target="_blank" rel="noopener">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank" rel="noopener">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vuex</a></li>
      <li><a href="https://v2.ssr.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org/" class="nav-link" target="_blank" rel="noopener">周刊</a></li>
      <li><a href="https://events.vuejs.org/" class="nav-link" target="_blank" rel="noopener">活动</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://blog.vuejs.org/" class="nav-link" target="_blank" rel="noopener">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank" rel="noopener">工作</a></li>
      <li><a href="https://dev.to/t/vue" class="nav-link" target="_blank" rel="noopener">DEV 社区</a></li>
    </ul></li>
  </ul>
</li>

<li class="nav-dropdown-container resources">
  <a href="https://v2.cn.vuejs.org/#" class="nav-link">资源列表</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li>
      <a target="_blank" rel="noopener" href="https://cn.vuejs.org/about/team.html" class="nav-link team">团队</a>
    </li>
    <li>
      <a target="_blank" rel="noopener" href="https://cn.vuejs.org/sponsor/">赞助商</a>
    </li>
    <li><a target="_blank" rel="noopener" href="https://cn.vuejs.org/partners/" class="nav-link">合作伙伴</a></li>
    <li>
      <a target="_blank" rel="noopener" href="https://cn.vuejs.org/ecosystem/themes.html" class="nav-link">主题</a>
    </li>
    <li>
      <a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank" rel="noopener">Awesome Vue</a>
    </li>
    <li>
      <a href="https://awesomejs.dev/for/vue/" class="nav-link" target="_blank" rel="noopener">浏览和 Vue 相关的包</a>
    </li>
  </ul>
</li>

<li>
  <a href="https://v2.cn.vuejs.org/eol/" class="badge-parent">终止支持 (EOL)<sup class="badge">新</sup></a>
</li>
<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a target="_blank" rel="noopener" href="https://v2.vuejs.org/index.html" class="nav-link">English</a></li>
    <li><a target="_blank" rel="noopener" href="https://jp.vuejs.org/index.html" class="nav-link">日本語</a></li>
    <li><a target="_blank" rel="noopener" href="https://ru.vuejs.org/index.html" class="nav-link">Русский</a></li>
    <li><a target="_blank" rel="noopener" href="https://kr.vuejs.org/index.html" class="nav-link">한국어</a></li>
    <li><a target="_blank" rel="noopener" href="https://br.vuejs.org/index.html" class="nav-link">Português</a></li>
    <li><a target="_blank" rel="noopener" href="https://fr.vuejs.org/index.html" class="nav-link">Français</a></li>
    <li><a target="_blank" rel="noopener" href="https://vi.vuejs.org/index.html" class="nav-link">Tiếng Việt</a></li>
    <li><a target="_blank" rel="noopener" href="https://es.vuejs.org/index.html" class="nav-link">Español</a></li>
    <li><a target="_blank" rel="noopener" href="https://docs.vuejs.id/index.html" class="nav-link">Bahasa Indonesia</a></li>
  </ul>
</li>

<!-- start: special logic for cn -->
<li><a href="https://github.com/vuejs/v2.cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>
<!-- end: special logic for cn -->

    </ul>
  </header>
</div>

    
      

<main role="main">
  <div class="sidebar">
    <div class="sidebar-inner-index">
      <ul class="main-menu">
        <li>
  <form id="search-form">
    <input type="text" id="search-query-sidebar" class="search-query st-default-search-input aa-input" aria-label="搜索" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-2" dir="auto" style=""><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Arial; font-size: 13.3333px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
  </form>
</li>
<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>文档</h4></li>
    <li>
      <ul>
        <li><a href="https://v2.cn.vuejs.org/v2/guide/" class="nav-link">教程</a></li>
        <li><a href="https://v2.cn.vuejs.org/v2/api/" class="nav-link">API</a></li>
        <li><a href="https://v2.cn.vuejs.org/v2/style-guide/" class="nav-link">风格指南</a></li>
        <li><a href="https://v2.cn.vuejs.org/v2/examples/" class="nav-link">示例</a></li>
        <li><a href="https://v2.cn.vuejs.org/v2/cookbook/" class="nav-link">Cookbook</a></li>
      </ul>
    </li>
    <li><h4>视频教程</h4></li>
    <li>
      <ul>
        <li>
          <a href="https://www.vuemastery.com/courses/" class="nav-link" target="_blank" rel="sponsored noopener">
            Vue Mastery (英文)
          </a>
        </li>
        <li>
          <a href="https://vueschool.io/?friend=vuejs&amp;utm_source=Vuejs.org&amp;utm_medium=Link&amp;utm_content=Navbar%20Dropdown" class="nav-link" target="_blank" rel="sponsored noopener">
            Vue School (英文)
          </a>
        </li>
        <!-- start: special logic for cn -->
        <li>
          <a href="https://learning.dcloud.io/" class="nav-link" target="_blank" rel="sponsored noopener">
            DCloud 视频教程
          </a>
        </li>
        <!-- end: special logic for cn -->
      </ul>
    </li>
  </ul>
</li>

<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank" rel="noopener">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank" rel="noopener">聊天室</a></li>
      <li><a href="https://events.vuejs.org/meetups/" class="nav-link" target="_blank" rel="noopener">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank" rel="noopener">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vuex</a></li>
      <li><a href="https://v2.ssr.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org/" class="nav-link" target="_blank" rel="noopener">周刊</a></li>
      <li><a href="https://events.vuejs.org/" class="nav-link" target="_blank" rel="noopener">活动</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://blog.vuejs.org/" class="nav-link" target="_blank" rel="noopener">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank" rel="noopener">工作</a></li>
      <li><a href="https://dev.to/t/vue" class="nav-link" target="_blank" rel="noopener">DEV 社区</a></li>
    </ul></li>
  </ul>
</li>

<li class="nav-dropdown-container resources">
  <a href="https://v2.cn.vuejs.org/#" class="nav-link">资源列表</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li>
      <a target="_blank" rel="noopener" href="https://cn.vuejs.org/about/team.html" class="nav-link team">团队</a>
    </li>
    <li>
      <a target="_blank" rel="noopener" href="https://cn.vuejs.org/sponsor/">赞助商</a>
    </li>
    <li><a target="_blank" rel="noopener" href="https://cn.vuejs.org/partners/" class="nav-link">合作伙伴</a></li>
    <li>
      <a target="_blank" rel="noopener" href="https://cn.vuejs.org/ecosystem/themes.html" class="nav-link">主题</a>
    </li>
    <li>
      <a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank" rel="noopener">Awesome Vue</a>
    </li>
    <li>
      <a href="https://awesomejs.dev/for/vue/" class="nav-link" target="_blank" rel="noopener">浏览和 Vue 相关的包</a>
    </li>
  </ul>
</li>

<li>
  <a href="https://v2.cn.vuejs.org/eol/" class="badge-parent">终止支持 (EOL)<sup class="badge">新</sup></a>
</li>
<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a target="_blank" rel="noopener" href="https://v2.vuejs.org/index.html" class="nav-link">English</a></li>
    <li><a target="_blank" rel="noopener" href="https://jp.vuejs.org/index.html" class="nav-link">日本語</a></li>
    <li><a target="_blank" rel="noopener" href="https://ru.vuejs.org/index.html" class="nav-link">Русский</a></li>
    <li><a target="_blank" rel="noopener" href="https://kr.vuejs.org/index.html" class="nav-link">한국어</a></li>
    <li><a target="_blank" rel="noopener" href="https://br.vuejs.org/index.html" class="nav-link">Português</a></li>
    <li><a target="_blank" rel="noopener" href="https://fr.vuejs.org/index.html" class="nav-link">Français</a></li>
    <li><a target="_blank" rel="noopener" href="https://vi.vuejs.org/index.html" class="nav-link">Tiếng Việt</a></li>
    <li><a target="_blank" rel="noopener" href="https://es.vuejs.org/index.html" class="nav-link">Español</a></li>
    <li><a target="_blank" rel="noopener" href="https://docs.vuejs.id/index.html" class="nav-link">Bahasa Indonesia</a></li>
  </ul>
</li>

<!-- start: special logic for cn -->
<li><a href="https://github.com/vuejs/v2.cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>
<!-- end: special logic for cn -->

      </ul>
    </div>
  </div>

  <div id="hero">
    <div class="inner">
      <div class="left">
        <img class="hero-logo" src="./Vue.js_files/logo.svg" alt="Vue logo">
      </div><div class="right">
        <h2 class="vue">Vue.js</h2>
        <h1>
          渐进式<br>JavaScript 框架
        </h1>
        <p>
          <a id="modal-player" class="button has-icon" href="javascript:;">
            <svg aria-labelledby="simpleicons-play-icon" role="img" viewBox="0 0 100 125" fill="#FFFFFF"><title id="simpleicons-play-icon" lang="en">Play icon</title><path d="M50,3.8C24.5,3.8,3.8,24.5,3.8,50S24.5,96.2,50,96.2S96.2,75.5,96.2,50S75.5,3.8,50,3.8z M71.2,53.3l-30.8,18  c-0.6,0.4-1.3,0.5-1.9,0.5c-0.6,0-1.3-0.1-1.9-0.5c-1.2-0.6-1.9-1.9-1.9-3.3V32c0-1.4,0.8-2.7,1.9-3.3c1.2-0.6,2.7-0.6,3.8,0  l30.8,18c1.2,0.6,1.9,1.9,1.9,3.3S72.3,52.7,71.2,53.3z"></path></svg>

            WHY VUE.JS?</a>
          <a class="button white" href="https://v2.cn.vuejs.org/v2/guide/">起步</a>
          <a class="button gray has-icon" href="https://github.com/vuejs/vue" target="_blank" rel="noopener">
            <svg aria-labelledby="simpleicons-github-dark-icon" lang="" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-github-dark-icon" lang="en">GitHub Dark icon</title><path fill="#7F8C8D" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>

            GITHUB</a>
        </p>
      </div>
    </div>
  </div>

  <div id="special">
    <h3>特别赞助</h3>
    <!-- start: special logic for cn -->
    <a href="http://github.crmeb.net/u/vue" target="_blank" rel="noopener sponsored">
      <img id="s-CRMEB" alt="CRMEB" style="height:55px" src="./Vue.js_files/crmeb.svg">
      <script>
      (function(){
        var el = document.getElementById("s-CRMEB");
        var adImg = null;
        var altImg = null;
        var img = "https://sponsors.vuejs.org/images/crmeb.svg?v2";
        el.src = (altImg && Math.random() >= 0.5 ? altImg : (adImg || img));
      })()
      </script>
    </a>
    <br>
    <a class="description" href="http://github.crmeb.net/u/vue" target="_blank" rel="noopener sponsored">
      开源电商系统    </a>
    <!-- end: special logic for cn -->
    <br>
    <!-- <a class="become-backer" href="/support-vuejs/#special-sponsor-china">
      成为特别赞助商
    </a> -->
  </div>

  <div id="highlights">
    <div class="inner">
      <div class="point">
        <h2>易用</h2>
        <p>已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！</p>
      </div>

      <div class="point">
        <h2>灵活</h2>
        <p>不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。</p>
      </div>

      <div class="point">
        <h2>高效</h2>
        <p>
          20kB min+gzip 运行大小<br>
          超快虚拟 DOM <br>
          最省心的优化
        </p>
      </div>
    </div>
  </div>

  <div id="sponsors">
    <div class="inner">
      

<h3>Patreon 赞助商</h3>

<a href="https://bit.dev/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
  <img src="./Vue.js_files/bit.svg" alt="Bit">
</a>
<a href="https://www.vuemastery.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
  <img src="./Vue.js_files/vuemastery.png" alt="VueMastery">
</a>
<a href="https://vueschool.io/?utm_source=Vuejs.org&amp;utm_medium=Banner&amp;utm_campaign=Sponsored%20Banner&amp;utm_content=V1" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
  <img src="./Vue.js_files/vueschool.png" alt="VueSchool">
</a>
<a href="https://vehikl.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
  <img src="./Vue.js_files/vehikl.png" alt="Vehikl">
</a>
<a href="https://passionatepeople.io/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
  <img src="./Vue.js_files/passionate_people.png" alt="Passionate People">
</a>
<a href="https://www.storyblok.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
  <img src="./Vue.js_files/storyblok.png" alt="Storyblok">
</a>
<a href="https://opencollective.com/2021-frameworks-fund" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
  <img src="./Vue.js_files/chrome_frameworks_fund.png" alt="Chrome Frameworks Fund">
</a>
<a href="https://www.herodevs.com/support/vue" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
  <img src="./Vue.js_files/herodevs.png" alt="HeroDevs">
</a>
<br>
<br>
<a href="https://tidelift.com/subscription/npm/vue" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/tidelift.png" alt="Tidelift">
</a>
<a href="https://laravel.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/laravel.png" alt="Laravel">
</a>
<a href="https://www.y8.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/y8.png" alt="Y8">
</a>
<a href="https://js.devexpress.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/devexpress.png" alt="DevExpress">
</a>
<a href="https://www.lycorp.co.jp/en/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/ly_corporation.png" alt="LY Corporation">
</a>
<a href="https://www.fenetre.nl/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/fen_tre_online_solutions.svg" alt="Fenêtre Online Solutions">
</a>
<a href="https://antdv.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/ant_design_vue.png" alt="Ant Design Vue">
</a>
<a href="https://crisp.chat/en/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/crisp.png" alt="Crisp">
</a>
<a href="https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=vuejs&amp;utm_medium=banner&amp;utm_campaign=sponsorships_vuejs&amp;utm_content=logo" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/localazy.svg" alt="Localazy">
</a>
<a href="https://www.uudetkasinot.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/uudetkasinot_com.png" alt="uudetkasinot.com">
</a>
<a href="https://usefathom.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/fathom_analytics.svg" alt="Fathom Analytics">
</a>
<a href="https://sentry.io/for/vue?utm_source=vuejs.org&amp;utm_medium=paid-community" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/sentry.png" alt="Sentry">
</a>
<a href="https://poprey.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/poprey_com.png" alt="Poprey.com">
</a>
<a href="https://famoid.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/famoid.png" alt="Famoid">
</a>
<a href="https://www.certible.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/certible.svg" alt="Certible">
</a>
<a href="https://www.fortunegames.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/fortune_games.png" alt="FORTUNE GAMES">
</a>
<a href="http://tbdc.com.br/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/tbdc___agro_software.svg" alt="TBDC - Agro Software">
</a>
<a href="https://rxdb.info/?utm_source=sponsor&amp;utm_medium=opencollective&amp;utm_campaign=opencollective-vuejs" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/daniel.png" alt="Daniel">
</a>
<a href="https://qbtoolhub.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/quickbooks_tool_hub.png" alt="Quickbooks Tool Hub">
</a>
<a href="https://opensource.muenchen.de/software/vue.js.html" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/it_m.png" alt="it@M">
</a>
<a href="https://blastup.com/buy-instagram-likes" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/blastup.png" alt="Blastup">
</a>
<a href="https://vuejobs.com/?utm_source=vuejs.com&amp;utm_campaign=sponsor" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/vuejobs.png" alt="VueJobs">
</a>
<a href="https://huly.io/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/huly.svg" alt="Huly">
</a>
<a href="https://automatenspieler.net/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/automatenspieler.png" alt="Automatenspieler">
</a>
<a href="https://stormlikes.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/stormlikes.png" alt="Stormlikes">
</a>
<a href="https://superviral.io/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/superviral.png" alt="Superviral">
</a>
<a href="https://goread.io/buy-instagram-followers" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/goread_io.png" alt="Goread.io">
</a>
<a href="https://celebian.com/buy-tiktok-followers" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/celebian.png" alt="Celebian">
</a>
<a href="https://opencollective.com/skweezer-net" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/skweezer_net.png" alt="Skweezer.net">
</a>
<a href="https://casinorevisor.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/casinorevisor_com.png" alt="casinorevisor.com">
</a>
<a href="https://buzzoid.com/buy-instagram-followers/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/buzzoid___buy_instagram_followers.png" alt="Buzzoid - Buy Instagram Followers">
</a>
<a href="https://twicsy.com/buy-instagram-followers" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/buy_instagram_followers_twicsy.png" alt="Buy Instagram Followers Twicsy">
</a>
<a href="https://www.famety.com/" target="_blank" rel="sponsored noopener" class="sponsor" style="width: 120px; height: 60px; line-height: 60px;">
  <img src="./Vue.js_files/famety___buy_instagram_followers.png" alt="Famety - Buy Instagram Followers">
</a>
<br>

<a class="become-sponsor button white" href="https://v2.cn.vuejs.org/support-vuejs/">成为赞助者！</a>

<script>
window.addEventListener('load', function () {
  [].forEach.call(document.querySelectorAll('.open-collective-sponsors img'), function (img) {
    if (img.width === 1) {
      img.width = 0
      img.parentElement.style.margin = '0 -1px 0 0'
    }
  })
})
</script>

<!-- start: special logic for cn -->
<br>
<br>
<br>

<h3>中国区视频托管赞助商</h3>
<a href="http://cloud.youku.com/index.php?source=vuejs" target="_blank" style="width: 120px;">
  <img src="./Vue.js_files/youku.png" style="width: 120px;">
</a>
<!-- end: special logic for cn -->

    </div>
  </div>

  <div id="news">
    <div class="inner">
      <h3><label for="member_email">订阅我们的周刊 (英文)</label></h3>
      <form class="newsletter-form" id="revue-form" name="revue-form" target="_blank" rel="noopener" action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber" method="post" @submit="subscribe">
        <input class="newsletter-input" type="email" name="member[email]" id="member_email" required="" placeholder="邮件地址">
        <input class="button newsletter-button" type="submit" value="订阅" name="member[subscribe]" id="member_submit">
      </form>
      <p>
        你可以在 <a href="https://news.vuejs.org/" target="_blank" rel="noopener">news.vuejs.org</a> 翻阅往期的 issue，也可以收听 podcast。
      </p>
    </div>
  </div>
</main>

<footer id="footer" role="contentinfo">
  <p>
    <a class="social-icon" href="https://github.com/vuejs/vue" target="_blank" rel="noopener">
      <svg aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-github-icon" lang="en">GitHub icon</title><path fill="#FFFFFF" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>

    </a>
    <a class="social-icon" href="https://twitter.com/vuejs" target="_blank" rel="noopener">
      <svg aria-labelledby="simpleicons-twitter-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-twitter-icon" lang="en">Twitter icon</title><path fill="#FFFFFF" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"></path></svg>

    </a>
    <a class="social-icon" href="https://medium.com/the-vue-point" target="_blank" rel="noopener">
      <svg aria-labelledby="simpleicons-medium-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-medium-icon" lang="en">Medium icon</title><path fill="#FFFFFF" d="M2.846 6.36c.03-.295-.083-.586-.303-.784l-2.24-2.7v-.403H7.26l5.378 11.795 4.728-11.795H24v.403l-1.917 1.837c-.165.126-.247.333-.213.538v13.5c-.034.204.048.41.213.537l1.87 1.837v.403h-9.41v-.403l1.937-1.882c.19-.19.19-.246.19-.538V7.794l-5.39 13.688h-.727L4.278 7.794v9.174c-.052.386.076.774.347 1.053l2.52 3.06v.402H0v-.403l2.52-3.06c.27-.278.39-.67.326-1.052V6.36z"></path></svg>

    </a>
  </p>
  <p>遵循 <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener">MIT 开源协议</a><br>
  Copyright © 2014-2024 Evan You</p>
</footer>

<!-- start: special logic for cn -->
<div id="video-modal" class="modal">
  <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"></div>
</div>
<!-- end: special logic for cn -->

<script>
(function () {
  var topScrolled = false
  var sponsors = document.getElementById('sponsors')
  var sponsorTop = sponsors.offsetTop
  var sponsorActive = false

  window.addEventListener('resize', function () {
    sponsorTop = sponsors.offsetTop
  })

  window.addEventListener('scroll', function () {
    if (window.pageYOffset > 165 && !topScrolled) {
      topScrolled = true
      document.getElementById('mobile-bar').classList.remove('top')
    } else if (window.pageYOffset <= 165 && topScrolled) {
      topScrolled = false
      document.getElementById('mobile-bar').classList.add('top')
    }
    if (window.pageYOffset > sponsorTop - 100) {
      if (!sponsorActive) {
        sponsorActive = true
        sponsors.classList.add('active')
      }
    } else {
      if (sponsorActive) {
        sponsorActive = false
        sponsors.classList.remove('active')
      }
    }
  })
})()
</script>

    

    <!-- main custom script for sidebars, version selects etc. -->
    <script src="./Vue.js_files/css.escape.js.下载"></script>
    <script src="./Vue.js_files/common.js.下载"></script>

    <!-- search -->
    <link href="./Vue.js_files/docsearch.min.css" rel="stylesheet" type="text/css">
    
<link rel="stylesheet" href="./Vue.js_files/search.css">

    <script src="./Vue.js_files/docsearch.min.js.下载"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      docsearch({
        appId: 'UURH1MHAF7',
        apiKey: 'c23eb8e7895f42daeaf2bf6f63eb4bf6',
        indexName: 'vuejs_cn2',
        inputSelector: selector,
        algoliaOptions: { facetFilters: ["version:v2"]},
        autocompleteOptions: { hint: false, appendTo: 'body'}
      })
    })

    // unregister service worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for(let registration of registrations) {
          registration.unregister()
        }
      })
    }
    </script><span class="algolia-autocomplete" style="position: absolute; z-index: 100; display: none; direction: ltr;"><span class="aa-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0" style="display: block; left: 0px; right: auto;"><div class="aa-dataset-1"></div></span></span><span class="algolia-autocomplete" style="position: absolute; z-index: 100; display: none; direction: ltr;"><span class="aa-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-2" style="display: block; left: 0px; right: auto;"><div class="aa-dataset-3"></div></span></span>
  

</body><div id="transmart-crx-shadow-root" style="all: initial;"><template shadowrootmode="open"><div id="transmart-crx-app-container"><div id="transmartTrxPopupContainer" class="trans-ctx--container-popup react-draggable" style="left: 10px; top: 15px; transform: translate(0px, 0px);"><svg class="trans-ctx--icon-trans" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M213.333 640v85.333a85.333 85.333 0 0 0 78.934 85.12l6.4.214h128V896h-128A170.667 170.667 0 0 1 128 725.333V640h85.333zM768 426.667 955.733 896h-91.946l-51.243-128H638.037L586.88 896h-91.904l187.69-469.333H768zM725.333 549.76l-53.205 132.907h106.325l-53.12-132.907zm-384-464.427v85.334H512v298.666H341.333v128H256v-128H85.333V170.667H256V85.333h85.333zm384 42.667A170.667 170.667 0 0 1 896 298.667V384h-85.333v-85.333a85.333 85.333 0 0 0-85.334-85.334h-128V128h128zM256 256h-85.333v128H256V256zm170.667 0h-85.334v128h85.334V256z" fill="#fff"></path></svg><div class="trans-ctx--panel-result"><div class="trans-ctx--container-title"><span class="trans-ctx--title-text" id="draggable-header">翻译结果</span><span><select class="trans-ctx--selector-lang"><option value="ar">阿拉伯语</option><option value="de">德语</option><option value="ru">俄语</option><option value="fr">法语</option><option value="ko">韩语</option><option value="pt">葡萄牙语</option><option value="ja">日语</option><option value="th">泰语</option><option value="tr">土耳其语</option><option value="es">西班牙语</option><option value="it">意大利语</option><option value="en">英语</option><option value="vi">越南语</option><option value="ct">粤语</option><option value="zh">中文</option></select><select class="trans-ctx--selector-lang"></select><span class="trans-ctx--btn-more">查看更多结果</span><span title="打开设置"><svg class="trans-ctx--icon-setting" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M913.94 431.828c-4.877-25.783-20.692-42.456-40.947-42.456h-3.512c-54.731 0-99.248-44.516-99.248-99.263 0-17.295 8.299-37.015 8.62-37.799 10.097-22.722 2.349-50.567-18.08-64.859l-102.7-57.183-1.51-.739c-20.546-8.91-48.667-3.207-63.987 12.754-11.087 11.434-49.307 44.038-78.472 44.038-29.543 0-67.849-33.258-78.992-44.91-15.293-16.076-43.124-22.112-63.902-13.217l-106.357 58.272-1.597 1.016c-20.43 14.234-28.207 42.078-18.165 64.714.346.828 8.676 20.387 8.676 37.914 0 54.747-44.517 99.263-99.247 99.263h-4.15c-19.618 0-35.434 16.672-40.309 42.456-.363 1.814-8.59 45.446-8.59 80.43 0 34.939 8.227 78.555 8.59 80.355 4.875 25.8 20.691 42.487 40.947 42.487h3.512c54.73 0 99.247 44.517 99.247 99.247 0 17.412-8.329 37.058-8.648 37.812-10.07 22.767-2.35 50.568 18.022 64.788l100.756 56.531 1.538.697c20.837 9.171 49.015 3.192 64.25-13.464 14.074-15.208 52.208-46.783 80.21-46.783 30.355 0 69.446 35.347 80.707 47.767 10.387 11.376 26.349 18.227 42.687 18.227 7.632 0 14.857-1.511 21.474-4.354l104.472-57.574 1.538-.99c20.429-14.276 28.207-42.077 18.139-64.727-.35-.842-8.678-20.403-8.678-37.929 0-54.73 44.517-99.247 99.248-99.247h4.094c19.644 0 35.488-16.687 40.365-42.487.348-1.8 8.588-45.416 8.588-80.355 0-34.986-8.24-78.618-8.588-80.432m-50.959 80.43c0 22.606-4.498 51.655-6.56 63.786-82.097 6.732-145.737 75.335-145.737 158.303 0 23.42 7.43 45.851 11.377 56.17l-89.121 49.216c-4.383-4.584-17.326-17.645-34.94-30.762-30.935-22.926-60.595-34.636-88.106-34.636-27.279 0-56.704 11.42-87.494 34.055-17.528 12.77-30.296 25.48-34.766 30.18l-85.724-47.996c4.179-10.84 11.405-32.983 11.405-56.227 0-82.968-63.64-151.571-145.708-158.303-2.09-12.13-6.588-41.18-6.588-63.786 0-22.651 4.498-51.714 6.588-63.844 82.068-6.718 145.708-75.336 145.708-158.304 0-23.288-7.429-45.793-11.376-56.095l91.326-50.19c3.976 3.976 17.006 16.73 34.823 29.412 30.356 21.663 59.261 32.633 86.016 32.633 26.495 0 55.196-10.766 85.347-32.01 17.963-12.623 30.964-25.202 34.736-28.757l87.901 48.825c-3.975 10.244-11.405 32.676-11.405 56.182 0 82.968 63.64 151.586 145.738 158.304 2.062 12.158 6.56 41.338 6.56 63.844"></path><path d="M510.216 365.633c-80.53 0-146.057 65.528-146.057 146.058 0 80.543 65.528 146.043 146.057 146.043 80.53 0 146.057-65.5 146.057-146.043 0-80.53-65.527-146.058-146.057-146.058m86.51 146.058c0 47.693-38.8 86.492-86.51 86.492-47.709 0-86.48-38.799-86.48-86.492 0-47.666 38.771-86.48 86.48-86.48 47.71.001 86.51 38.814 86.51 86.48"></path></svg></span></span><span title="关闭翻译结果面板"><svg class="trans-ctx--icon-close" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"><path d="M31.112 1.414 29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556"></path></svg></span></div><div class="trans-ctx--content"><div class="trans-ctx--result-section"><div class="trans-ctx--label">原文：</div><div class="trans-ctx--trs-content trans-ctx--source"></div></div><div class="trans-ctx--result-section"><div class="trans-ctx--label">译文：</div><div class="trans-ctx--trs-content"></div></div></div></div></div></div><link rel="stylesheet" href="chrome-extension://lkjkfecdnfjopaeaibboihfkmhdjmanm/static/css/content.css"><style type="text/css">
    ::-webkit-scrollbar-track-piece {
      position: absolute;
      background-color: #fff;
      border-radius: 0;
    }
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: #b8b8b8;
      border: 2px solid #fff;
      border-radius: 6px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      -moz-opacity: 0.3;
      -khtml-opacity: 0.3;
      opacity: 0.5;
      filter: alpha(opacity = 30);
    }
    ::-webkit-scrollbar-thumb:hover {
      height: 50px;
      background-color: #878987;
    }
  </style></template></div></html>